// import React from "react";
// import ReachECharts from "echarts-for-react";
// import "./index.css";
// import { Scene, PointLayer ,PolygonLayer,LineLayer} from "@antv/l7";
// import { GaodeMap } from "@antv/l7-maps";

// const Index = () => {
// const scene = new Scene({
//   id: 'map',
//   map: new GaodeMap({
//     center: [120.15, 30.246],
//     zoom: 13.5,
//     style: 'dark',
//     pitchEnable: false,
//     rotation: -90,
//     // style:'blank',
//     backgroundColor:'#1F4B75'
//   }),
// });

// scene.on('loaded', () => {
//   scene.addImage(
//     'arrow',
//     'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
//   );

//   fetch('https://gw.alipayobjects.com/os/bmw-prod/67130c6c-7f49-4680-915c-54e69730861d.json')
//     .then((data) => data.json())
//     .then(({ lakeBorderData, lakeData, landData }) => {
//       const lakeLayer = new PolygonLayer()
//         .source(lakeData)
//         .shape('fill')
//         .color('#1E90FF')
//         .style({
//           opacity: 0.4,
//           opacityLinear: {
//             enable: true,
//             dir: 'out', // in - out
//           },
//         });
//       const landLayer = new PolygonLayer()
//         .source(landData)
//         .shape('fill')
//         .color('#3CB371')
//         .style({
//           opacity: 0.4,
//           opacityLinear: {
//             enable: true,
//             dir: 'in', // in - out
//           },
//         });

//       const lakeBorderLayer = new PolygonLayer()
//         .source(lakeBorderData)
//         .shape('fill')
//         .color('#ccc')
//         .style({
//           opacity: 0.5,
//           opacityLinear: {
//             enable: true,
//             dir: 'in', // in - out
//           },
//         });

//       scene.addLayer(lakeLayer);
//       scene.addLayer(lakeBorderLayer);
//       scene.addLayer(landLayer);
//     });

//   fetch('https://gw.alipayobjects.com/os/basement_prod/40ef2173-df66-4154-a8c0-785e93a5f18e.json')
//     .then((res) => res.json())
//     .then((data) => {
//       const layer = new LineLayer({})
//         .source(data)
//         .size(3)
//         .shape('line')
//         .texture('arrow')
//         .color('rgb(22,119,255)')
//         .animate({
//           interval: 1, // 间隔
//           duration: 1, // 持续时间，延时
//           trailLength: 2, // 流线长度
//         })
//         .style({
//           opacity: 0.6,
//           lineTexture: true, // 开启线的贴图功能
//           iconStep: 10, // 设置贴图纹理的间距
//           borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
//           borderColor: '#fff', // 默认为 #ccc
//         });
//       scene.addLayer(layer);
//     });
// });

//   let option1 = {
//     tooltip: {
//       trigger: "item",
//     },
//     legend: {
//       top: "5%",
//       left: "center",
//     },
//     series: [
//       {
//         name: "Access From",
//         type: "pie",
//         radius: ["40%", "70%"],
//         avoidLabelOverlap: false,
//         itemStyle: {
//           borderRadius: 10,
//           borderColor: "#fff",
//           borderWidth: 2,
//         },
//         label: {
//           show: false,
//           position: "center",
//         },
//         emphasis: {
//           label: {
//             show: true,
//             fontSize: 40,
//             fontWeight: "bold",
//           },
//         },
//         labelLine: {
//           show: false,
//         },
//         data: [
//           { value: 1048, name: "Search Engine" },
//           { value: 735, name: "Direct" },
//           { value: 580, name: "Email" },
//           { value: 484, name: "Union Ads" },
//           { value: 300, name: "Video Ads" },
//         ],
//       },
//     ],
//   };
//   let option2 = {
//     tooltip: {
//       trigger: "axis",
//       axisPointer: {
//         type: "cross",
//         crossStyle: {
//           color: "#999",
//         },
//       },
//     },
//     toolbox: {
//       feature: {
//         dataView: { show: true, readOnly: false },
//         magicType: { show: true, type: ["line", "bar"] },
//         restore: { show: true },
//         saveAsImage: { show: true },
//       },
//     },
//     legend: {
//       data: ["Evaporation", "Precipitation", "Temperature"],
//     },
//     xAxis: [
//       {
//         type: "category",
//         data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//         axisPointer: {
//           type: "shadow",
//         },
//       },
//     ],
//     yAxis: [
//       {
//         type: "value",
//         name: "Precipitation",
//         min: 0,
//         max: 250,
//         interval: 50,
//         axisLabel: {
//           formatter: "{value} ml",
//         },
//       },
//       {
//         type: "value",
//         name: "Temperature",
//         min: 0,
//         max: 25,
//         interval: 5,
//         axisLabel: {
//           formatter: "{value} °C",
//         },
//       },
//     ],
//     series: [
//       {
//         name: "Evaporation",
//         type: "bar",
//         tooltip: {
//           valueFormatter: function (value) {
//             return value + " ml";
//           },
//         },
//         data: [
//           2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,
//         ],
//       },
//       {
//         name: "Precipitation",
//         type: "bar",
//         tooltip: {
//           valueFormatter: function (value) {
//             return value + " ml";
//           },
//         },
//         data: [
//           2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,
//         ],
//       },
//       {
//         name: "Temperature",
//         type: "line",
//         yAxisIndex: 1,
//         tooltip: {
//           valueFormatter: function (value) {
//             return value + " °C";
//           },
//         },
//         data: [
//           2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
//         ],
//       },
//     ],
//   };
//   let option3 = {
//     title: {
//       text: "Stacked Line",
//     },
//     tooltip: {
//       trigger: "axis",
//     },
//     legend: {
//       data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
//     },
//     grid: {
//       left: "3%",
//       right: "4%",
//       bottom: "3%",
//       containLabel: true,
//     },
//     toolbox: {
//       feature: {
//         saveAsImage: {},
//       },
//     },
//     xAxis: {
//       type: "category",
//       boundaryGap: false,
//       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
//     },
//     yAxis: {
//       type: "value",
//     },
//     series: [
//       {
//         name: "Email",
//         type: "line",
//         stack: "Total",
//         data: [120, 132, 101, 134, 90, 230, 210],
//       },
//       {
//         name: "Union Ads",
//         type: "line",
//         stack: "Total",
//         data: [220, 182, 191, 234, 290, 330, 310],
//       },
//       {
//         name: "Video Ads",
//         type: "line",
//         stack: "Total",
//         data: [150, 232, 201, 154, 190, 330, 410],
//       },
//       {
//         name: "Direct",
//         type: "line",
//         stack: "Total",
//         data: [320, 332, 301, 334, 390, 330, 320],
//       },
//       {
//         name: "Search Engine",
//         type: "line",
//         stack: "Total",
//         data: [820, 932, 901, 934, 1290, 1330, 1320],
//       },
//     ],
//   };
//   let option4 = {
//     xAxis: {},
//     yAxis: {},
//     series: [
//       {
//         symbolSize: 20,
//         data: [
//           [10.0, 8.04],
//           [8.07, 6.95],
//           [13.0, 7.58],
//           [9.05, 8.81],
//           [11.0, 8.33],
//           [14.0, 7.66],
//           [13.4, 6.81],
//           [10.0, 6.33],
//           [14.0, 8.96],
//           [12.5, 6.82],
//           [9.15, 7.2],
//           [11.5, 7.2],
//           [3.03, 4.23],
//           [12.2, 7.83],
//           [2.02, 4.47],
//           [1.05, 3.33],
//           [4.05, 4.96],
//           [6.03, 7.24],
//           [12.0, 6.26],
//           [12.0, 8.84],
//           [7.08, 5.82],
//           [5.02, 5.68],
//         ],
//         type: "scatter",
//       },
//     ],
//   };
//   let option5 = {
//     title: {
//       text: "Proportion of Browsers",
//       subtext: "Fake Data",
//       top: 10,
//       left: 10,
//     },
//     tooltip: {
//       trigger: "item",
//     },
//     legend: {
//       type: "scroll",
//       bottom: 10,
//       data: (function () {
//         var list = [];
//         for (var i = 1; i <= 28; i++) {
//           list.push(i + 2000 + "");
//         }
//         return list;
//       })(),
//     },
//     visualMap: {
//       top: "middle",
//       right: 10,
//       color: ["red", "yellow"],
//       calculable: true,
//     },
//     radar: {
//       indicator: [
//         { text: "IE8-", max: 400 },
//         { text: "IE9+", max: 400 },
//         { text: "Safari", max: 400 },
//         { text: "Firefox", max: 400 },
//         { text: "Chrome", max: 400 },
//       ],
//     },
//     series: (function () {
//       var series = [];
//       for (var i = 1; i <= 28; i++) {
//         series.push({
//           type: "radar",
//           symbol: "none",
//           lineStyle: {
//             width: 1,
//           },
//           emphasis: {
//             areaStyle: {
//               color: "rgba(0,250,0,0.3)",
//             },
//           },
//           data: [
//             {
//               value: [
//                 (40 - i) * 10,
//                 (38 - i) * 4 + 60,
//                 i * 5 + 10,
//                 i * 9,
//                 (i * i) / 2,
//               ],
//               name: i + 2000 + "",
//             },
//           ],
//         });
//       }
//       return series;
//     })(),
//   };
//   let option6 = {
//     series: [
//       {
//         type: "gauge",
//         startAngle: 180,
//         endAngle: 0,
//         center: ["50%", "75%"],
//         radius: "90%",
//         min: 0,
//         max: 1,
//         splitNumber: 8,
//         axisLine: {
//           lineStyle: {
//             width: 6,
//             color: [
//               [0.25, "#FF6E76"],
//               [0.5, "#FDDD60"],
//               [0.75, "#58D9F9"],
//               [1, "#7CFFB2"],
//             ],
//           },
//         },
//         pointer: {
//           icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
//           length: "12%",
//           width: 20,
//           offsetCenter: [0, "-60%"],
//           itemStyle: {
//             color: "auto",
//           },
//         },
//         axisTick: {
//           length: 12,
//           lineStyle: {
//             color: "auto",
//             width: 2,
//           },
//         },
//         splitLine: {
//           length: 20,
//           lineStyle: {
//             color: "auto",
//             width: 5,
//           },
//         },
//         axisLabel: {
//           color: "#464646",
//           fontSize: 20,
//           distance: -60,
//           rotate: "tangential",
//           formatter: function (value) {
//             if (value === 0.875) {
//               return "Grade A";
//             } else if (value === 0.625) {
//               return "Grade B";
//             } else if (value === 0.375) {
//               return "Grade C";
//             } else if (value === 0.125) {
//               return "Grade D";
//             }
//             return "";
//           },
//         },
//         title: {
//           offsetCenter: [0, "-10%"],
//           fontSize: 20,
//         },
//         detail: {
//           fontSize: 30,
//           offsetCenter: [0, "-35%"],
//           valueAnimation: true,
//           formatter: function (value) {
//             return Math.round(value * 100) + "";
//           },
//           color: "inherit",
//         },
//         data: [
//           {
//             value: 0.7,
//             name: "Grade Rating",
//           },
//         ],
//       },
//     ],
//   };

//   return (
//     <div className="box">
//       <div className="top">
//         <div className="top_left">
//           <ReachECharts
//             option={option1}
//             style={{ padding: "10px", width: "100%", height: "100%" }}
//           ></ReachECharts>
//         </div>
//         <div className="top_righ">
//           <ReachECharts
//             option={option2}
//             style={{ padding: "10px", width: "100%", height: "100%" }}
//           ></ReachECharts>
//         </div>
//       </div>
//       <div className="mid">
//         <div className="top_left">
//           <ReachECharts
//             option={option3}
//             style={{ padding: "10px", width: "100%", height: "100%" }}
//           ></ReachECharts>
//         </div>
//         <div className="top_righ">
//           <ReachECharts
//             option={option4}
//             style={{ padding: "10px", width: "100%", height: "100%" }}
//           ></ReachECharts>
//         </div>
//       </div>
//       <div className="fot">
//         <div className="top_left">
//           <ReachECharts
//             option={option5}
//             style={{ padding: "10px", width: "100%", height: "100%" }}
//           ></ReachECharts>
//         </div>
//         <div className="top_righ">
//           <ReachECharts
//             option={option6}
//             style={{ padding: "10px", width: "100%", height: "100%" }}
//           ></ReachECharts>
//         </div>
//       </div>
//       <div className="map_box">
//         <div id="map"></div>
//       </div>
//     </div>
//   );
// };

// export default Index;


import React from 'react'

const Index = () => {
  return ( 123 );
}
 
export default Index;